<template>
	<div class="titles"> 车友圈 </div>
	<html>
	<head lang="en">
	    <meta charset="UTF-8">
	    <link type="text/css" rel="stylesheet" href="JSTest4.css" />
	</head>
	<body>
	<div class="bbs">

	    <section>
	        <ul>
	        </ul>
	    </section>
	    <div class="post" id="post1">
	        <input id="title" placeholder="请输入标题（1-50个字符）">
			<div class="select">
				<select>
					<option>请选择版块</option>
					<option>爱车问题求助</option>
					<option>好车分享</option>
					<option>新手报到</option>
					<option>经验交流</option>
				</select>
			</div>
	        <textarea class="content"></textarea>
	        <input class="btn" value="发布" @click="post()">
	    </div>
		<header>
			<span @click="iWantPost()">我要发帖
			</span>
		</header>
	</div>
	</body>
	</html>
</template>	
<script setup>
	import {onMounted} from 'vue';
		onMounted(()=>{
			console.log("this is on Mounted")
			changeGuidActive()
		})
		const $emit = defineEmits(['change'])
		const changeGuidActive = () => {
			console.log("change",3)
			$emit("change",3)
		}
	
	    function iWantPost() {
	        document.getElementById("post1").style.display = "block";
	    }
	
	    function headPortrait() {
	        //使用数组保存发帖者的头像
	        var head = new Array("01.png", "02.png", "03.png", "04.png");
	        //生成 0 到 数组长度之间的随机数
	        var n = parseInt(Math.random() * 4);
	        return head[n];
	    }
	
	    function post() {
	        document.getElementById("post1").style.display = "none";
	        /* 创建节点 */
	        var ul = document.getElementsByTagName("ul")[0];
	        var li = document.createElement("li");
	        var div = document.createElement("div");
	        var img = document.createElement("img");
	        var h1 = document.createElement("h1");
	        var p = document.createElement("p");
	        var span = document.createElement("span");
	
	        ul.appendChild(li);
	        li.className = ".bbs section ul li";
	
	        li.appendChild(div);
	        div.className = ".bbs section ul li div";
			
			
	        // 插入头像
	        div.appendChild(img);
	        img.className = ".bbs section ul li div img";
	        // img.src = "../image/" + headPortrait();
			img.src = "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
	
	        // 插入标题
	        li.appendChild(h1);
	        h1.className = ".bbs section ul li h1";
	        h1.innerHTML = document.getElementById("title").value;
	
	        // 插入板块
	        li.appendChild(p);
	        p.className = ".bbs section ul li p";
	        p.innerHTML = "版块：" + document.getElementsByTagName("select")[0].value;
	
	        // 插入时间
	        p.appendChild(span);
	        span.className = ".bbs section ul li p span";
	
	        var today = new Date();
	        var year = today.getFullYear();
	        var month = today.getMonth() + 1;
	        var day = today.getDate();
	        var hour = today.getHours();
	        var minute = today.getMinutes();
	        var second = today.getSeconds();
	
	        span.innerHTML = " 发表时间：" + year + "-" + month + "-" + day + "&nbsp;" + hour + ":" + minute + ":" + second;
	
	        document.getElementById("title").value = "";
	        document.getElementsByTagName("select")[0].value = "";
	        ul.insertBefore(li, ul.firstElementChild);
	    }
</script>

<style>
	*{
		margin: 0; padding: 0; font-family: "Arial", "微软雅黑";
		}
	ul,li{
		list-style: none;
		}
	.bbs{
		margin: 0 auto;
		/* width: 100%; */
		position: relative;
		padding-top: 0%;
		padding-bottom: 20%;
		}
	header{
		padding: 5px ; 
		width:98%;
		/* border-bottom: 1px solid #cecece; */
		}
	header span{
		display:inline-block; 
		width: 100%;
		height: 50px; 
		color: #fff;
		background: #1989fa; 
		font-size: 18px;
		font-weight: bold; 
		text-align: center;
		line-height: 50px; 
		border-radius: 8px; 
		cursor: pointer;}
	.post{
		position: absolute;
		background: #ffffff;
		/* border: 1px #cccccc solid; */
		width:100%;
		height: 100%;
		left: 0px;
		top:0.5%; 
		padding: 5px;
		font-size: 100%; 
		z-index: 999999;
		display: none;}
	.post .title{
		/* width:100%; */
		height:30px; 
		line-height: 30px; 
		display: block; 
		border: 1px #cecece solid; 
		margin-bottom: 10px;
		}
	.post .select{
		/* width: 100%; */
		padding-top: 5px;
		padding-bottom: 5px;
		/* height: 30px; */
		}
	.post .content{
		width:96%;
		height: 200px; 
		padding-right: 5px;
		display: block; 
		margin: 10px 0;
		border: 1px #cecece solid;
		
		}
	.post .btn{
		/* width: 100%; */
		height: 35px; 
		color: #fff; 
		background: #1989fa; 
		border: none; 
		font-size: 14px; 
		font-weight: bold; 
		text-align: center; 
		line-height: 35px;
		border-radius: 8px; 
		cursor: pointer;
		}
	.bbs section ul li{
		padding: 10px 0; 
		border-bottom: 1px #999999 dashed;
	    overflow: hidden;
		}
	.bbs section ul li div{
		float: left; 
		width: 60px; 
		margin-right: 10px;
		padding-left: 3px;
		}
	.bbs section ul li div img{ 
		border-radius:50%;
		width: 40px;
		height: 40px;
		padding-left: 3px;
		}
	.bbs section ul li h1{
		float: left; 
		width: 520px; 
		font-size: 16px; 
		line-height: 35px;
		}
	.bbs section ul li p{
		color: #666666; 
		line-height: 25px; 
		font-size: 12px; 
		}
	.bbs section ul li p span{
		padding-right:20px;
		}

</style>